<template>
<div :class="[$style.container]">
<el-dialog title="发起流程" :visible.sync="visible" width="720px">
  <el-form size="small" label-position="top" :rules="rules" :model="form" @submit.native.prevent="" ref="fm" v-if="visible">
   <el-row :gutter="24">
     <el-col :span="12">
        <el-form-item prop="applyDoc" label="发起文件/文件夹">
          <span>{{form.applyDoc || '-'}}</span>
        </el-form-item>
     </el-col>
     <el-col :span="12">
        <el-form-item prop="processDefKey" label="选择模版" :rules="[{ required: true, message: '请选择模版' }]">
          <search-select v-model="form.processDefKey" :loader="loader" style="width: 100%;" ref="defRef" placeholder="请选择审批模版" @select="onSelectDef"></search-select>
        </el-form-item>
     </el-col>
     <!-- <el-col :span="24">
        <el-form-item prop="name" label="上传文件">
          <el-select v-model="form.tmpl" placeholder="请上传文件" style="width: 100%;"></el-select>
        </el-form-item>
     </el-col> -->
    <!-- <el-col :span="24">
        <el-form-item prop="uamsk" label="文档权限">
          <umask-checkbox v-model="form.umask"></umask-checkbox>
        </el-form-item>
     </el-col> -->
     <dynamic-form :form="form" :def="flowDef" v-if="flowDef"></dynamic-form>
     <el-col :span="24">
        <el-form-item prop="remark" label="说明">
          <el-input type="textarea" v-model="form.remark" placeholder="请填写说明"></el-input>
        </el-form-item>
     </el-col>
   </el-row>
  </el-form>
  <span slot="footer">
    <el-button size="small" @click="onCancel" class="px-5">取 消</el-button>
    <el-button size="small" type="primary" @click="onConfirm" :loading="submitting" class="px-5">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>

<script lang="ts">

import { ModalMixins } from '@/mixins'
import { mixins } from 'vue-class-component'
import { Vue, Component, Prop, Emit, Ref } from 'vue-property-decorator'
import { likeFlowDefs } from '@/api/flow-def'
import { startProcess } from '@/api/flow'
import DynamicForm from './components/dynamic-form/index.vue'

@Component({
  components: { DynamicForm }
})
export default class DocFlowModal extends mixins(ModalMixins) {
  @Ref() fm!: any

  data: any = null

  form = {
    applyDoc: '',
    processDefKey: '',
    remark: '',
    variables: {}
  }

  flowDef: any = null

  rules = {
  }

  get loader () {
    return (keyword: string) => likeFlowDefs({ entId: this.data?.ownId, name: keyword, type: this.data?.type })
      .then(data => (data || []).map((v: any) => Object.assign({}, v, { label: `${v.name}`, value: v.code })))
  }

  open (data: any) {
    this.data = data
    this.flowDef = null
    if (this.fm) this.fm.resetFields()
    this.$nextTick(() => {
      const extra = {
        applyDoc: data?.path || '',
        processDefKey: '',
        remark: '',
        variables: {}
      }
      Object.assign(this.form, extra)
    })
    return this.init()
  }

  onCancel () {
    this.cancel()
  }

  onConfirm () {
    this.fm.validate().then((valid: boolean) => {
      if (!valid) return
      this.submitting = true
      startProcess(this.form.processDefKey, Object.assign({}, this.form, { action: this.flowDef?.action })).then(data => {
        this.complete(data)
      }).finally(() => {
        this.submitting = false
      })
    })
  }

  onSelectDef (item: any) {
    this.flowDef = null
    this.$nextTick(() => {
      this.flowDef = item || null
    })
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

}

</style>
